<template>
  <div>
    <group label-width="4.5em" class="info_div" label-margin-right="2em" label-align="right">
        <x-input title="学校" v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.schoolName"></x-input>
        <x-input title="所属院系"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.departmentName"></x-input>
        <x-input title="工号"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.no"></x-input>
        <x-input title="姓名" :max="100" :readonly="!isCanEdit" text-align="right" v-model="userInfo.name"></x-input>
        <x-input title="手机号"  :max="11" :readonly="!isCanEdit" text-align="right" v-model="userInfo.cellphone"></x-input>
        <x-input title="职称"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.titleName"></x-input>
        <x-input title="用户类型"  v-show="!isCanEdit" :readonly="true" text-align="right" v-model="userInfo.userTypeName"></x-input>
        <x-input title="研究方向"  :max="100" :readonly="!isCanEdit" text-align="right" v-model="userInfo.studyDirection"></x-input>
         <div class="zbtc_parent">
        <div class="zbtc" v-show="!isCanEdit" ></div>
          <cell :title="'正装照'">
          <div>
            <imgUpload :extClass="'upload_self_img'" @uploadOkEvent="uploadOkEvent" :height="'80px'" :imgSrc="userInfo.suitImg"
                  :defaultSrc="'./static/img/avatar_default.png'" ref="imgUpload"></imgUpload>
          </div>
        </cell>
        </div>
      
        <x-textarea id='userSummary' title="个人简介"  :max="200" :readonly="!isCanEdit"   v-model="userInfo.summary"></x-textarea>
    </group>
  <div class="button_div">
    <x-button action-type="button" v-show="isCanEdit" class="dskt_btn" type="warn" @click.native="onSave">保存</x-button>
    <x-button action-type="button" v-show="!isCanEdit" class="dskt_btn" type="primary" @click.native="isCanEdit=true">编辑</x-button>
  </div>
  </div>
</template>

<script>
import userService from '../../shared/service/userService'
import { XImg, Group, Cell ,XInput ,XTextarea } from "vux";
import imgUpload from "../../components/imgUpload.vue";
import baseService from '../../shared/service/baseService'
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { userInfo } from 'os';

export default {
  components: {
    XImg,
    Group,
    Cell,
    XInput, 
    XTextarea, 
    imgUpload,
  },
  
  data() {
    return {
      loginUserId:this.$cookie.getUserId(),
      loginFileId:this.$cookie.get(this.$cookie.key.userFileId),
      userInfo:{},
      isCanEdit:false,
    };
  },
  mounted() {
     weixinService.initWx(wx);
    //页面滚动给顶部的搜索栏添加一个样式.
    this.getData();
    //弹出键盘的解决  
    $("#userSummary textarea").attr("jump",true);
    //后面加的事件要添加一下 
    dealKeyOverInput();
  },
  created(){
    
  },
  methods: {
    getData() {
       userService.getTeacherInfo(this.loginFileId).then((res)=>{
          this.userInfo=res.data;
          this.$refs.imgUpload.setImgSrc(this.userInfo.suitImg);
      });
    },
    uploadOkEvent(fileSrc) {
    //  userService.updateTeacherInfo({id:this.loginFileId,suitImg:fileSrc}).then((res)=>{
                this.$refs.imgUpload.setImgSrc(fileSrc);
                this.userInfo.suitImg = fileSrc;
    //            this.$cookie.set(this.$cookie.key.headImg , fileSrc);
    //            this.$vux.toast.text("头像更新成功");
   //   });
    },
    onSave(){
      this.userInfo.name=this.$commonUtil.filteremoji( this.userInfo.name);
           if(!this.userInfo.name){
          this.$vux.toast.text("姓名输入有误");
          return;
      }
      

      if(this.userInfo.cellphone.length!=11){
        this.$vux.toast.text("手机号错误");
        return;
      }
           
      if( !this.$commonUtil.isPoneAvailable(this.userInfo.cellphone) ){
        this.$vux.toast.text("手机号错误");
        return;
      }
      userService.updateTeacherInfo(this.userInfo).then((res)=>{
                this.$cookie.setLoginUserData(this.userInfo);
                this.$vux.toast.text("保存成功");
                this.isCanEdit=false;
      });
    }
  }
};
</script>

<style scoped>
.button_div{
  padding: 20px 15%;
}

.zbtc_parent{
    position: relative;
}

.zbtc{
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
</style>
